<template>
  <div>
    <div class="cvs-container">
      <canvas id="my-cvs"></canvas>
    </div>
    <div class="swiper-container" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="base-msg">
            <h1 class="name c-title">汪子斐</h1>
            <p class="motto">不认命，就拼命</p>
            <p class="desc">一个在努力成长的小前端</p>
            <p class="show">https://gitee.com/winnicat</p>
          </div>
          <img src="../assets/imgs/photo.png" class="myphoto">
        </div>
        <div class="swiper-slide">
          <div class="base-msg">
            <h2 class='c-title fn-center'>基本信息</h2>
            <ul class="base-list">
              <li><span class="title">意向职务：</span><span>Web前端</span></li>
              <li><span class="title">籍贯：</span><span>浙江兰溪</span></li>
              <li><span class="title">出生年月：</span><span>1993-6</span></li>
              <li><span class="title">民族：</span><span>汉族</span></li>
              <li><span class="title">政治面貌：</span><span>党员</span></li>
              <li><span class="title">学校：</span><span class="s-font">杭州电子科技大学信息工程学院</span></li>
              <li><span class="title">学历：</span><span>本科</span></li>
              <li><span class="title">专业：</span><span>计算机科学与技术</span></li>
              <li><span class="title">兴趣特长：</span><span>舞蹈、手工、唱歌、绘画</span></li>
              <li><span class="title">证书：</span><span>大学英语四级（CET-4）</span></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="object-msg">
            <h2 class='c-title'>主要经历</h2>
            <div class="object-container">
              <div class="left">
                <div class="item">
                  <h5 class="title"><router-link :to="'xinhua'">新华社 3.0/4.0/5.0<span class="sub">more</span></router-link></h5>
                  <p>前端部分项目主负责人，参与三次大型项目迭代，部分业务重构，主要负责cms管理后台各类需求实现，分享页、Hybird端内详情页开发及日常维护。</p>
                </div>
                <div class="item">
                  <h5 class="title">XINHUANEWS 1.0</h5>
                  <p>前端部分项目主负责人，主要负责cms管理后台各类需求实现，分享页、Hybird端内详情页开发及日常维护。</p>
                </div>
                <div class="item">
                  <h5 class="title">杭+ （城市通）</h5>
                  <p>负责cms管理后台重构。</p>
                </div>
              </div>
              <div class="right">
                <div class="item">
                  <h5 class="title"><router-link :to="'pizza'">Pizza 框架<span class="sub">more</span></router-link></h5>
                  <p>参与部门内pizza框架构建，主要负责各类功能插件开发。</p>
                </div>
                <div class="item">
                  <h5 class="title">网评员（飞鸽）</h5>
                  <p>负责cms管理后台搭建，参与小程序开发。eChart实现数据可视化大屏展示。</p>
                </div>
                <div class="item">
                  <h5 class="title">Html5 活动页</h5>
                  <p>实现投票，大转盘，刮刮乐等各类交互动画及小游戏活动页。</p>
                </div>
                <div class="item">
                  <h5 class="title">微商城、一元购</h5>
                  <p>负责一元购项目（公众号网页项目）的开发</p>
                </div>
              </div>
            </div>
            <div class="work-container">
              <p>工作经历：2015年3月--至今  浙江新华移动传媒股份有限公司</p>
              <p>实习经历：2014年7月--2014年12月  杭州古北科技有限公司</p>
              <p class="sub">--工作内容：官网设计与开发、产品上架图设计、APP界面设计、公司宣传PPT设计与制作</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="skill-msg">
            <h2 class='c-title'>专业技能</h2>
            <div class="skill-container">
              <div class='s-row'>
                <div class="s-l">HTML5</div>
                <div class="s-l">CSS3</div>
                <div class="s-l">jQuery</div>
              </div>
              <div class='s-row'>
                <div class="s-m">VueJs</div>
                <div class="s-m">Javascript</div>
                <div class="s-s">ES6</div>
                <div class="s-l">Stylus</div>
                <div class="s-s">Canvas</div>
              </div>
              <div class='s-row'>
                <div class="s-m">Bootstrap</div>
                <div class="s-l">Swiper</div>
                <div class="s-s">Zepto</div>
                <div class="s-m">eChart</div>
                <div class="s-m">Kindeditor</div>
              </div>
              <div class="s-row">
                <div class="s-s">Webpack</div>
                <div class="s-s">NodeJs</div>
                <div class="s-m">SVN</div>
                <div class="s-m">Git</div>
                <div class="s-s">小程序</div>
              </div>
              <div class="s-row">
                <div class="s-l">不断学习中···</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="skill-msg">
            <h2 class='c-title'>个人技能</h2>
            <div class="skill-container">
              <div class="s-row">
                <div class="s-l">Photoshop</div>
                <div class="s-m">Illstractor</div>
                <div class="s-s">Adobe Effect</div>
              </div>
              <div class="s-row">
                <div class="s-s">平面设计</div>
                <div class="s-m">图片处理</div>
                <div class="s-s">视频处理</div>
                <div class="s-m">PPT制作</div>
              </div>
              <div class="s-row">
                <div class="s-l">不断发掘中···</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="school-msg">
            <h2 class='c-title'>在校情况</h2>
            <div class="school-container">
              <div class="s-row">
                <div>团支书</div>
                <div>科协宣传部部长</div>
                <div>班导</div>
              </div>
              <div class="s-row">
                <div class='deep'>一等奖学金三次、二等奖学金一次<br />三等奖学金两次、单项奖学金三次</div>
              </div>
              <div class="s-row">
                <div class='light'>省软件外包大赛三等奖</div>
              </div>
              <div class="s-row">
                <div class='light'>校软件外包大赛一等奖</div>
              </div>
              <div class="s-row">
                <div>校电子商务大赛三等奖</div>
              </div>
              <div class="s-row">
                <div class='light'>优秀毕业生</div>
                <div>三好学生</div>
                <div>优秀部长</div>
              </div>
              <div class="s-row">
                <div>院职业生涯规划大赛一等奖</div>
              </div>
              <div class="s-row">
                <div>杭电好声音第一名</div>
              </div>
              <div class="s-row">
                <div>社会实践先进个人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="call-msg">
            <h2 class='c-title'>联系我</h2>
            <div class="call-container">
              <p>email: winni0619@163.com</p>
              <p>QQ: 475190076</p>
              <b>做喜欢的事，才能走的更远</b>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view class="toast-container"></router-view>
  </div>
</template>

<script type="text/javascript">
import Swiper from '../../static/dist/js/swiper.min.js';
import '../../static/dist/css/swiper.min.css';

  export default {
    data() {
      return {
        theSwiper: {},
        theCvs: {}
      }
    },
    created() {
    },
    mounted() {
      let wWidth = window.innerWidth;
      let wHeight = window.innerHeight;

      // console.log($(this.$refs.swiper));
      $(this.$refs.swiper).width(wWidth-40);
      $(this.$refs.swiper).height(wHeight-40);
      this.initBackground(wWidth, wHeight);
      this.initSwiper();
    },
    updated() {
    },
    methods: {
      initSwiper() {
        this.theSwiper = new Swiper(".swiper-container", {
          direction : 'horizontal',
          // autoplay: 10000,
          // loop: true
        })
      },
      initBackground(w, h) {
        let c = document.getElementById('my-cvs');
        let cvs = c.getContext("2d");
        let _this = this;
        const MARGIN = 20;
        const NUM = 12; //小球数
        const SNUM = 8; //流星数

        c.width = w - MARGIN * 2;
        c.height = h - MARGIN * 2;

        // 创建渐变背景
        var grd=cvs.createLinearGradient(0,c.height,c.width,0);
        grd.addColorStop(0,"#fda9bb");
        // grd.addColorStop(0.5, "#ffffff");
        grd.addColorStop(1,"#fdc9d6");

        let config = this.getCvsConfig(w, h);
        let balls = [];
        let starts = [];

        for(var i = 0; i < NUM; i++){
          balls.push(new this.Ball(config, cvs));
        }

        for(var j = 0; j < SNUM; j++){
          starts.push(new this.Star(config, cvs));
        }

        //绘制渐变背景
        function drawBackground() {
          cvs.fillStyle = grd;
          cvs.fillRect(0,0,w,h);
        }

        //绘制流星
        function drawStar(i) {
          cvs.beginPath();
          // cvs.rotate(- Math.PI * (config.w/config.h));
          cvs.arc(starts[i].x, starts[i].y, starts[i].r, starts[i].l, starts[i].l + Math.PI, false);
          cvs.arc(starts[i].ex, starts[i].ey, starts[i].er, starts[i].l + Math.PI, starts[i].l, false);
          cvs.closePath();
          cvs.fillStyle = starts[i].color;
          cvs.fill();
          let finished = starts[i].update();
          if(finished) {
            starts.splice(i, 1);
            starts.push(new _this.Star(config, cvs));
          }
          // cvs.rotate(Math.PI * (config.w/config.h));
        }

        //绘制小球
        function drawBall(i) {
          cvs.beginPath();
          cvs.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, false);
          cvs.closePath();
          // console.log(grd);
          cvs.fillStyle = balls[i].color;
          // cvs.strokeStyle = "white";
          // cvs.stroke();
          cvs.fill();
          let finished = balls[i].update();
          if(finished){
            balls.splice(i, 1);
            balls.push(new _this.Ball(config, cvs));
          }
        }

        function step() {
          cvs.clearRect(0,0,config.w, config.h);
          drawBackground();
          // drawStar(0);
          for(var i = 0; i < starts.length; i++){
            (function(i){
              drawStar(i);
            }(i))
          }
          for(var i = 0; i < balls.length; i++){
            (function(i){
              drawBall(i);
            }(i))
          }
          window.requestAnimationFrame(step);
        }

        step();
      },
      //返回动画背景的配置参数
      getCvsConfig(w, h){
        const SPEED = 0.8;
        return {
          w: w,
          h: h,
          maxNum: 10, //一个画面最多容纳球体的数量
          color: ["#fa91a8", "#f8bccb"], //渐变色
          xspeed: SPEED, //球运动的横向速度
          yspeed: SPEED * h / w,
          size: [12, 100] //球体的最大半径
        }
      },
      //实例化小球
      Ball(c, cvs){
        let r =  Math.round(Math.random() * c.size[1]);
        this.r = r < c.size[0]? c.size[0] : r; //小球半径
        let x = Math.random() * (2 * c.w);
        let y = (c.h / c.w) * x - c.h;
        //起点坐标
        if(x > c.w){
          this.x = Math.ceil(c.w + this.r);
          this.y = Math.ceil(y + this.r);
        }else{
          this.x = Math.ceil(x + this.r);
          this.y = -this.r
        }
        this.color = cvs.createLinearGradient(this.x - this.r,this.y + this.r,this.x + this.r,this.y - this.r);
        this.color.addColorStop(0,"#fda9bb");
        this.color.addColorStop(1,"#fed6df");
        //更新位置
        this.update = function(){
          this.x -= c.xspeed * (1 - this.r / (c.size[1] + c.size[0]));
          this.y += c.yspeed * (1 - this.r / (c.size[1] + c.size[0]));
          if(this.x < -this.r || this.y > (c.h+this.r)){
            return true;
          }
          this.color = cvs.createLinearGradient(this.x - this.r,this.y + this.r,this.x + this.r,this.y - this.r);
          this.color.addColorStop(0,"#fed6df");
          this.color.addColorStop(1,"#fda9bb");
          // console.log(this.x +" ,"+ this.y);
        }
      },
      //流行
      Star(c, cvs){
        this.r = 5; //流星的半径
        this.er = 2; //流星的尾半径
        this.len = 80; //流星的长度
        let x = Math.random() * (2 * c.w);
        let y = (c.h / c.w) * x - c.h;
        //起点坐标
        if(x > c.w){
          this.x = Math.ceil(c.w + this.r);
          this.y = Math.ceil(y + this.r);
        }else{
          this.x = Math.ceil(x + this.r);
          this.y = -this.r
        }
        //终点坐标
        let l = Math.atan2(c.h, c.w);
        this.l = l; //旋转弧度
        this.ex = this.x + Math.cos(l) * this.len;
        this.ey = this.y - Math.sin(l) * this.len;
        this.color = cvs.createLinearGradient(this.x - this.r,this.y + this.r,this.ex + this.r,this.ey - this.r);
        this.color.addColorStop(0, "#ffffff");
        this.color.addColorStop(1, "rgba(255,255,255,0)");
        this.update = function() {
          this.x -= c.xspeed;
          this.ex -= c.xspeed;
          this.y += c.yspeed;
          this.ey += c.yspeed;
          this.color = cvs.createLinearGradient(this.x - this.r,this.y + this.r,this.ex + this.r,this.ey - this.r);
          this.color.addColorStop(0, "#ffffff");
          this.color.addColorStop(1, "rgba(255,255,255,0)");
          if(this.ex < 0 || this.xy > (c.h+this.er)){
            return true;
          }
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../assets/css/_fn.styl';
  .swiper-container
    position fixed !important
    left 20px
    top 20px
  .swiper-wrapper
    width 100%
    height 100%
  .swiper-slide
    // float left
    position relative
    width 100%
    height 100%
    display -webkit-box
    -webkit-box-align center
    -webkit-box-orient vertical
    -webkit-box-pack center
  .myphoto
    position absolute
    bottom 0
    right 10%
    height 96%
  .cvs-container
    margin 20px
    border-radius 20px
    overflow hidden
    #my-cvs
      display block
  .c-title
    font-size 50px
    color #fff
    text-shadow 2px 2px #fed5de, 4px 4px #f27590
  .base-msg
    // text-align center
    .motto
      font-size 32px
      color #dd6680
    .desc
      font-size 18px
      color rgba(255,255,255, .6)
    .show
      font-size 14px
      color #fff
    .base-list
      width 48em
      clearfix()
      li
        float left
        width 18em
        margin 1em
        padding 6px 2px 6px 6px
        color #fff
        font-weight bold
        font-size 14px
        white-space nowrap
        background-color rgba(#fda6b7,.5)
        border 1px solid rgba(#fda6b7,.8)
        box-sizing border-box
      .title
        display inline-block
        width 5em
        font-size 12px
        font-weight initial
    .s-font
      font-size 12px
  .skill-msg
    width 60%
    .c-title
      text-align center
  .skill-container
    margin 20px auto 0
    text-align center
    clearfix()
    .s-s,.s-m,.s-l
      display inline-block
      padding 4px 10px
      margin 4px 2px
      line-height 24px
      background-color #fff
      border-radius 4px
      box-shadow 0 2px 2px rgba(#f24e77, .2)
    .s-s
      font-size 14px
      background-color rgba(#fda7b8,.4)
    .s-m
      font-size 16px
      background-color rgba(#fbdbe3,.6)
    .s-l
      font-size 18px
      background-color rgba(255,255,255,.8)
  .school-msg
    .c-title
      text-align center
  .school-container
    margin-top 20px
    text-align center
    color rgba(255,255,255,.8)
    font-size 18px
    .s-row
      margin 10px 0
      &>div
        display inline-block
      .light
        color #fff
        font-size 20px
        font-weight bold
        text-shadow 0 0 2px rgba(#f24e77,.6)
      .deep
        color rgba(#f24e77 .6)
  .call-container
    text-align center
    margin-top 20px
    color #fff
    font-size 12px
    &>p
      border-bottom 1px solid #fff
  .object-msg
    width 80%
  .object-container
    margin 20px auto
    clearfix()
    .title
      font-size 22px
      color #dd6580
      border-bottom 1px dashed #dd6580
      a
        color #dd6580
        transition color 1s
        &:hover
          color #c9742e
      .sub
        float right
        margin-top 6px
        font-size 12px
      &::before
        display inline-block
        content ""
        width 12px
        height 12px
        background-color #dd6580
        margin-right 6px
        transform-origin center center
        transform rotate(45deg)
        transition all 1s
      &:hover::before
        background-color #c9742e
        width 16px
        margin-right 10px
        transform rotate(0deg)
    .left
      float left
      width 50%
      padding-right 5px
      box-sizing border-box
    .right
      float right
      width 50%
      padding-left 5px
      box-sizing border-box
    .item
      margin 10px 0
      font-size 16px
      color rgba(255,255,255,.9)
      p:not(.title)
        margin-top 8px
        font-weight bold
        text-shadow 0 0 1px #dd6580
  .work-container
    color rgba(255,255,255,.8)
    font-size 14px
    font-weight bold
    text-shadow 0 0 1px #dd6580
    .sub
      text-indent 1em
      font-size 12px
      color rgba(255,255,255,.6)
      text-shadow initial

  @media screen and (max-width: 400px)
    .myphoto
      height 50%
      right 0
      z-index -1
    .base-msg .base-list
      width 100%
      li
        float initial
        margin 4px 6px
    .object-container
      margin 0 auto
      .item
        font-size 10px
      .title
        font-size 14px
    .work-container
      margin-top -10px
      font-size 12px
      .sub
        font-size 10px
    .skill-msg
      width 90%
</style>